<template>
    <div class="">
        <div class="about_content">
            <div class="jsx-3555830542 info">
                <div class="jsx-3555830542 hr"></div>
                <div class="jsx-3754523816 aboutbox">
                    <h3 class="jsx-3754523816 aboutbox__title" @click="aboutUs">关于{{infoList.wap_shot}}</h3>
                    <div style="font-size: .8rem" class="jsx-3754523816 aboutbox__desc" @click="aboutUs">了解我们</div>
                </div>
                <div class="jsx-3555830542 hr"></div>
                <van-collapse v-model="activeNames">
                    <van-collapse-item title="合作伙伴" name="1">
                        <div style="padding: 0.8rem;display: flex;flex-wrap: wrap" class="jsx-3575620800 others">
                            <div class="jsx-3575620800 others__cooperation"  v-for="(item,index) in aboutList" :key="index">
                                <div class="jsx-3575620800 others__cooperation--item">
                                    <div class="img_icon">
                                        <a href="" class="jsx-3575620800">
                                            <img :src="getImgUrl(item.thumb)" alt="" class="jsx-3575620800">
                                        </a>
                                    </div>
                                    <div class="title_name" style="text-align: center">{{item.title}}</div>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
                <div class="jsx-3555830542 hr"></div>
                <div class="jsx-3382417645 contact">
                    <h3 class="jsx-3382417645 contact__title">联系我们</h3>
                    <div class="jsx-3382417645 contact__content">
                        <div class="jsx-3382417645 contact__content--email ocolor">邮箱： {{infoList.wap_email}}</div>
                        <div class="jsx-3382417645 contact__item">
                            <div class="jsx-3382417645 contact__item--left">
                                <div class="jsx-3382417645 contact__item--local">{{infoList.wap_address}}</div>
                                <div class="jsx-3382417645 contact__item--phone ocolor">{{infoList.wap_tel}}</div>
                            </div>
                            <div class="jsx-3382417645 contact__item--right  obgcolor">内地总部</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
</template>

<script>
export default {
  name: "About",
    props:{
        aboutList:Array,
        infoList:Object
    },
   data() {
    return {
       activeNames: ['0'],
    };
  },
  methods:{
      aboutUs(){
				this.$router.push({path:'/about_us'})
			},
      
  }
};
</script>

<style lang="less">
.van-cell__title{
    font-size: 0.8rem;
}
.container {

  .dit-wrapper {
    margin: 1.3rem 3.25rem 1.8rem;
    .dit-button {
      color: white;
      cursor: pointer;
      font-size: 0.7rem;
      line-height: 0.7rem;
      text-align: center;
      box-sizing: border-box;
      padding: 0.8rem 2.6rem;
      width: 12.25rem;
      height: 2.25rem;
      border-radius: 0.25rem;
      box-shadow: 0 10px 20px -10px rgba(0, 164, 255, 0.8);
      background-image: linear-gradient(180deg, #1f8eff 0%, #30b5ff 100%),
        linear-gradient(#00a4ff, #00a4ff);
    }
  }
  .hr.jsx-3555830542 {
    height: 0.4rem;
    background-color: #f5f5f5;
}
.aboutbox.jsx-3754523816 {
    background-color: #fff;
    .aboutbox__title.jsx-3754523816 {
        padding: 0.975rem 0.825rem;
        color: #2a4154;
        font-size: 0.8rem;
        border-bottom: 1px solid #f0f0f0;
        font-weight: normal;
    }
    .aboutbox__desc.jsx-3754523816 {
        padding: 0.85rem 0.825rem;
        color: #2a4154;
        font-size: 0.6rem;
    }
    // .partner-container{
    //      .partner-header{
    //          padding: 0.975rem 0.825rem;
    //         background-color: #fff;
    //          display: flex;
    //         justify-content: space-between;
    //         align-items: center;
    //         color: #2a4154;
    //         font-size: 0.8rem;
    //     }
    // }
}
.contact__title.jsx-3382417645 {
        padding: 0.975rem 0.825rem;
        color: #2a4154;
        font-size: 0.8rem;
        border-bottom: 1px solid #f0f0f0;
        font-weight: normal;
    }
    .contact__content.jsx-3382417645 {
        padding: 0 0.825rem 0.225rem;
        color: #2a4154;
        font-size: 0.6rem;
    }
    .contact__content--email.jsx-3382417645 {
        padding: 0.9rem 0 0.625rem;
        color: #00a4ff;
    }
    .contact__item.jsx-3382417645:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
    }
    .contact__item.jsx-3382417645 {
        padding: 0.625rem 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        line-height: 1.8;
    }
    .contact__item--phone.jsx-3382417645 {
        color: #00a4ff;
    }
    .contact__item--right.jsx-3382417645 {
        padding: 0 0.45rem;
        background-color: #00a4ff;
        border-radius: 0.475rem;
        height: 0.95rem;
        line-height: 0.95rem;
        color: #fff;
    }
    .others.jsx-3575620800 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: space-around;
        -webkit-justify-content: space-around;
        -ms-flex-pack: space-around;
        justify-content: space-around;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: #fff;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        overflow: hidden;
    }
    .others__cooperation.jsx-3575620800 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: space-around;
        -webkit-justify-content: space-around;
        -ms-flex-pack: space-around;
        justify-content: space-around;
        padding: 1.425rem 0 2.4rem;
    }
    .others__cooperation--item.jsx-3575620800 {
        -webkit-flex: 0 0 6.35rem;
        -ms-flex: 0 0 6.35rem;
        flex: 0 0 6.35rem;
    }
}
</style>
